<template>
	<div class="modal-list">
		<div>
			<div class="new-modal-title">
				<i class="modal-return ion-chevron-left" @click="$emit('barandCencal')"></i>
				意向车辆
				<i class="delete" @click="submit" style="font-size: 14px">确定</i>
			</div>
			<div style=" position: relative">
				<div class="screen-title-list" style="padding-bottom: 0" >
					<table>
						<tr>
							<td @click="barandFn">
								<div class="screen-title-item" style="max-width: auto;">{{brandName?brandName:'品牌'}}</div>
							</td>
							<td @click="seriesFn">
								<div class="screen-title-item" style="max-width: auto;">{{seriesName?seriesName:'车系'}}</div>
							</td>
						</tr>
					</table>					
				</div>
				
				<div class="psort">
					<item v-for="(item,index) in res" :class="{onactive:typeof(submits.find(item=>{return item == index?true:false}))!='undefined'}">
						<div class="screen-section-select s" >
							<input type="checkbox" v-model="submits" :value="index" :id="item.carId" class="none">
							<label :for="item.carId">
								<div class="car-editor-section-item">
									<div class="car-editor-section-img">
										<img :src="imgUrl+item.carImageUrl+'.r_90xh_60'" onerror="javascript:this.src='static/images/default.png';" />
									</div>
									<div class="car-editor-section-txt">
										<h5>{{item.carTitle}}</h5>
										<span>¥{{item.carRetailPrice}}万</span>
									</div>
								</div>
							</label>
						</div>
					</item>
				</div>
			</div>
			
		</div>
		<transition name="bottom">
			<keep-alive>
				<barand :params="paramsShow" :all="1" v-if="barandShow" @brandDelete="brandDelete" @brandCompletes="brandCompletes" />
			</keep-alive>
		</transition>
		<transition-group enter-active-class="fadeInRight animated" leave-active-class="fadeOutRight animated">
			<modal :paramsIs="paramsIs" v-for="(item,index) in paramsIs" :itemIndex="index" :key="item.emit" />
		</transition-group>
	</div>
</template>
<style type="text/css">
	.psort{ position: relative; padding-top: 43px; }
	.screen-section-select.s input{ vertical-align: middle; display: inline-block; }
	.screen-section-select.s label{ display: inline-block; vertical-align: middle; }
	.onactive .screen-section-select:after{content: "\f121";     font-family: "Ionicons"; text-align: center; line-height: 30px; font-size:22px; color: #FF6816; display: block; position: absolute; right: 20px; top: 50%;  width: 30px; height: 30px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}
	.item.item-borderless.hl-item.onactive{ background: #FFFAF7;}
</style>
<script type="text/javascript">
	import barand from "src/assembly/brand.vue"
	import modal from "src/assembly/modalList.vue"
	import {bus} from 'bus.js'
	export default {
		data(){
			return{
				imgUrl:imgUrl,
				barandShow:false,
				paramsShow:true,
				paramsIs:[],
				brandId:'',
				brandName:'',
				seriesId:'',
				seriesName:'',
				res:[],
				submits:[],
				submitss:[],
			}
		},
		methods:{
			submit(){
				this.submitss = []
				for(let i of this.submits){
					this.submitss.push({
						brandId:this.res[i].brandId,
						brandName:this.res[i].brand.brandName,
						carId:this.res[i].carId,
						carImageUrl:this.res[i].carImageUrl,
						carRetailPrice:this.res[i].carRetailPrice,
						carTitle:this.res[i].carTitle,
						intentionId:this.res[i].intentionId,
						seriesId:this.res[i].seriesId,
						seriesName:this.res[i].series.seriesName,
					})
				}
				this.$emit('dataChange',this.submitss)
			},
			//品牌车系
			barandFn(){
				this.barandShow = true
			},
			brandDelete(){
				this.barandShow = false
			},
			brandCompletes(val){
				if(!val){
					this.barandShow = false
					this.getJson()
					return
				}
				this.submits = []
				this.brandName = val.name
				this.brandId = val.id
				this.seriesId=''
				this.seriesName=''
				this.seriesFn()
				this.barandShow = false
			},
			//车系
			seriesFn(){
				if(!this.brandId){
					$toast.show('请先选择品牌', 2000)
					return
				}
				window.axios.get(baseUrl+'/controller/getSeriesList',{params:{
					brandId:this.brandId
				}}).then((res)=>{
					// console.log(res)
					this.paramsIs.push({
						list:[],
						title:'请选择车系',
						emit:'brandIds'
					})
					this.paramsIs[0].list.push({name:'不限车系',id:''})
					for(let item of res.data.result){
						this.paramsIs[0].list.push({
							name:item.seriesName,
							id:item.seriesId
						})
					}
				})
			},
			busOn(){
				bus.$off('brandIds')
				bus.$on('brandIds',(index)=>{
					// console.log(this.paramsIs)
					this.seriesId = this.paramsIs[0].list[index].id
					this.seriesName = this.paramsIs[0].list[index].name
					this.getJson()
					this.paramsIs = []
				})
			},
			getJson(){
				window.axios.get(baseUrl+'/crm-web/controller/follow/crmIntentionCars',{
					params:{
						brandId:this.brandId,
						seriesId:this.seriesId,
						marketId:sess.get('userSession').marketId,
						shopId:sess.get('userSession').shopId,
					}
				}).then(res=>{
					if(res){
						this.res = res.data.result
					}
				})
			}
		},
		components:{
			barand,
			modal
		},
		created(){
			this.busOn()
			this.getJson()
		},
		props:[
			'brandlist'
		],
		watch:{
			'brandlist':function(){
				// console.log('bb')
				this.submits = []
			}
		}


	}
</script>

